<template>
	<div class="header">
		<Gheader :showheader="data"></Gheader>
	<Scroll class="wrapper"> 
	
			<div class="neirong">
			<div class="title" @click="redfont($event)">
				<span>销量</span>
				<span>最新</span>
				<span @click="discoloration" class="pri">价格
					<img src="../../../assets/F-img/上多边形.png" v-if="lightbol||lightbol2"/>
					<img src="../../../assets/F-img/red上边形.png"  v-if="!lightbol&&!lightbol2"/>
					<img src="../../../assets/F-img/下多边形.png"  v-if="!lightbol||lightbol2"/>
					<img src="../../../assets/F-img/red下边形.png"  v-if="lightbol&&!lightbol2"/>
				</span>
				<span @click="screening">筛选</span>
			</div>
		
		<div class="ScreeningChoice" v-if="fenleilight.length!=0">
			<span class="empty" @click="qingkong()">清空</span>
			<div class="ScreeningChoice-L">
				<span v-for="(item,index) in fenleilight"><!--洁面护理-->{{item}}
					<em @click="cancel(index)"></em>
				</span>
			</div>
			
		</div>
		<ul class="ProductList">
			<li v-for="item in product">
				<img :src="item.img" class="tupian"/>
				<h2>{{item.title}}</h2>
				<h3>{{item.introduce}}</h3>
				<img :src="item.guoqi" class="nationalFlag"/>
				<span class="form">
					<!--<span class="nationalFlag">
						<span></span>
					</span>-->
					<img :src="item.feiji"/>
					<em>{{item.zhiyou}}</em>
				</span>
				<h3 class="price">¥ {{item.price}}</h3>
			</li>
		</ul>
		<ul>
			<li v-for="item in version">
				<img :src="item" class="version"/>
			</li>
		</ul>
		<span class="loading">加载更多</span>
		</div>
		</Scroll>
		
		<!--筛选-->
		<span class="mask" @click="mask()"></span>
		<div class="screening">
			<div class="comprehensive">
			<Scroll class="wrap">
			<div class="content">
				<div class="deliveryArea">
					<img src="../../../assets/F-img/发货地.png" class="deliveryArea-img"/>
					<em class="origin-em">发货地</em>
					<ul class="CommodityType-ul delive" @click="changecolor($event)">
						<li v-for="item in PointOrigin" class="Selectbutton" >{{item}}</li>
					</ul>
				</div>
				<hr />

				<div class="CommodityType">
					<img src="../../../assets/F-img/形状.png" class="deliveryArea-img"/>
					<em class="origin-em">商品类型</em>
					<ul class="CommodityType-ul type-ul" @click="commodity($event)">
						<li v-for="item in CommodityType" class="Selectbutton">{{item}}</li>
					</ul>
				</div>
				<hr />

				<div class="CommodityType">
					<img src="../../../assets/F-img/分类.png" class="deliveryArea-img"/>
					<em class="origin-em">分类</em>
					<ul class="CommodityType-ul" @click="origin($event)">
						<li v-for="item in classification" class="Selectbutton">{{item}}</li><em @click="nextStep">更多分类</em>
					</ul>
				</div>
				
				<hr />
					</div>
		</Scroll>
				<div class="bottombutton">
					<span class="reset" @click="reset">重置</span>
					<span class="determine" @click="determine">确定</span>
				</div>
				
			</div>
		
		</div>
		<div class="MoreClassification">
			<div class="MoreComprehensive">
				<div class="contentdelivery">
							<img src="../../../assets/F-img/右箭头.png" class="deliveryArea-img" @click="returnkey"/>
							<h3 class="deliveryArea-more">分类</h3>
							<h3 class="deliveryArea-determine" @click="confirm">确定</h3>
						</div>
				<Scroll class="more">
					<div class="more-content">
						
						<ul class="more-ul">
								<li v-for="item in Moreclassification" class="list">{{item}}</li>
								<!--<img src="../../../assets/F-img/唇彩.png"/>-->
							</ul>
					</div>
				</Scroll>
			</div>
			
		</div>	
	</div>
</template>

<script>
	import Scroll from "../../../../base/Scroll"
	import Gheader from "../../G-person/person-center/Gheader"
	export default{
		name:"FeelingEmpty",
		data(){
			return {
				bol:true,
				lightbol:true,
				lightbol2:true,
				zhongjianfenli:[],
				product:[
			{
				img:require("../../../assets/F-img/唇彩.png"),title:"幻彩萃璨花蕊唇彩4.8g",introduce:"幻彩萃璨花蕊唇彩4.8g幻彩萃璨花蕊唇彩4.8g幻彩萃璨花蕊唇彩4.8g",guoqi:require("../../../assets/F-img/111.jpg"),feiji:require("../../../assets/F-img/海外直邮.png"),zhiyou:"海外直邮",price:166.66
			},
			{
				img:require("../../../assets/F-img/唇彩.png"),title:"幻彩萃璨花蕊唇彩4.8g",introduce:"幻彩萃璨花蕊唇彩4.8g幻彩萃璨花蕊唇彩4.8g幻彩萃璨花蕊唇彩4.8g",guoqi:require("../../../assets/F-img/111.jpg"),feiji:require("../../../assets/F-img/海外直邮.png"),zhiyou:"海外直邮",price:166.66
			},
			{
				img:require("../../../assets/F-img/唇彩.png"),title:"幻彩萃璨花蕊唇彩4.8g",introduce:"幻彩萃璨花蕊唇彩4.8g幻彩萃璨花蕊唇彩4.8g幻彩萃璨花蕊唇彩4.8g",guoqi:require("../../../assets/F-img/111.jpg"),feiji:require("../../../assets/F-img/海外直邮.png"),zhiyou:"海外直邮",price:166.66
			},
			{
				img:require("../../../assets/F-img/唇彩.png"),title:"幻彩萃璨花蕊唇彩4.8g",introduce:"幻彩萃璨花蕊唇彩4.8g幻彩萃璨花蕊唇彩4.8g幻彩萃璨花蕊唇彩4.8g",guoqi:require("../../../assets/F-img/111.jpg"),feiji:require("../../../assets/F-img/海外直邮.png"),zhiyou:"海外直邮",price:166.66
			}
				],
				version:[require("../../../assets/F-img/花背景.png")],
				PointOrigin:["日本","美国","中国","澳大利亚","英国"],
				CommodityType:["促销商品","首发商品"],
				fenleilight:[],
				classification:["洁面护理","人气口红","名牌包包","洁面护理","人气口红","名牌包包","洁面护理","人气口红","名牌包包","洁面护理","人气口红","名牌包包","洁面护理","人气口红","名牌包包","洁面护理"],
				Moreclassification:["洁面护理","人气口红","名牌包包","洁面护理","人气口红","名牌包包","洁面护理","人气口红","名牌包包","洁面护理","人气口红","名牌包包","洁面护理","人气口红","名牌包包","洁面护理","人气口红","名牌包包","洁面护理","人气口红","名牌包包"],
				data:{
					word:"面部护理",
					left:[true,false,false],
					right:[false,false,false,false,false,false],
					leftword:"",
					rightword1:"",
					rightword2:""
				}
				
			}		
		},
		methods:{
			qingkong:function(){
				this.fenleilight=[];
			},
			discoloration:function(){
				this.lightbol2 = false;
				this.lightbol = !this.lightbol;
			},
			redfont:function(e){
//				console.log($(e.target)[0],$(".pri")[0])
				if($(e.target)[0]!=$(".pri")[0]){
					this.lightbol2 = true;
				}
				
				$(".title>span").css("color","black");
				$(e.target).css("color","red");
			},
			screening:function(){
				$(".screening").css("left","25vw");
				$(".screening").css("transition","all 0.2s");
				$(".mask").css("display","block");
				$(".Selectbutton").removeClass("fenleilight");
				for(var i=0;i<this.fenleilight.length;i++){
					for(var j=0;j<$(".Selectbutton").length;j++){
						if($($(".Selectbutton")[j]).text()==this.fenleilight[i]){
						$($(".Selectbutton")[j]).addClass("fenleilight")
					}
					}
					
				}
			},
			mask:function(){
				console.log("111");
				$(".mask").css("display","none");
				$(".screening").css("left","100vw");
				$(".MoreClassification").css("left","100vw");
			},
			origin:function(e){
				console.log(e.target);
				if(e.toElement.localName=="li"){
					
					if(e.target.classList.length==2){
						$(e.target).removeClass("fenleilight")						
//						this.zhongjianfenlie.splice(this.fenleilight.indexOf($(e.target).text()),1)
					}else{
						$(e.target).addClass("fenleilight")
//						this.zhongjianfenlie.push($(e.target).text())
					}
					

				}
				
			},
			changecolor:function(e){
				$(".delive>li").css({"backgroundColor":"#efefef","color":"#000"});
				if(e.toElement.localName == "li"){
					$(e.target).css({"backgroundColor":"#fcc8c9","color":"#d72533"});
				}
			},
			commodity:function(e){
				$(".type-ul>li").css({"backgroundColor":"#efefef","color":"#000"});
				if(e.toElement.localName == "li"){
					$(e.target).css({"backgroundColor":"#fcc8c9","color":"#d72533"});
				}
			},
			nextStep:function(){
				$(".screening").css("left","100vw");
				$(".MoreClassification").css("left","25vw");
			},
			returnkey:function(){
				$(".MoreClassification").css("left","100vw");
				$(".MoreClassification").css("transition","all 0.2s");
				$(".screening").css("left","25vw");
			},
			confirm:function(){
				$(".MoreClassification").css("left","100vw");
				$(".MoreClassification").css("transition","all 0.2s");
				$(".mask").css("display","none");
			},
			reset:function(){
				$(".Selectbutton").removeClass("fenleilight")
				this.zhongjianfenli=[];
			},
			determine:function(){
				$(".screening").css("left","100vw");
				$(".mask").css("display","none");
				this.zhongjianfenli=[];
				for(var i=0;i<$(".Selectbutton").length;i++){
					if($(".Selectbutton")[i].classList.length==2){
						this.zhongjianfenli.push($($(".Selectbutton")[i]).text())
					}
				}
				this.fenleilight=this.zhongjianfenli;
			},
			cancel:function(index){
				this.fenleilight.splice(index,1)
//				this.zhongjianfenlie.splice(this.fenleilight.indexOf($(e.target).text()),1)
			}
//			title:function(){
//				
//			}
		},
	  components:{
	  	Gheader,
	  	Scroll
	  }
		
	}
</script>

<style scoped>
	.Selectbutton.fenleilight{
		background-color: #fcc8c9;
		color: #d72533;
	}
	.more{
		overflow: hidden;
		width: 75vw;
		height: 83.3vh;
	}
	.wrap{
		overflow: hidden;
		width: 75vw;
		height: 83.3vh;
		
	}
	.wrapper{
		overflow: hidden;
		height: 90vh;
	}
	em{
		font-style: normal;
	}
	hr{
		border: none;
		border-top: 1px solid #c1c1c1;
	}
	.header{
		background-color: #efefef;
	}

	.navigation{
		width: 100%;
		background-color: #d72532;
	}
	.navigation h3{
		font-size: 1.6rem;
		text-align: center;
		color: white;
		font-weight: 200;
		padding-top: 1.7rem;
		padding-bottom: 1.7rem;
	}
	.title{
		padding-top: 1.3rem;
		padding-bottom: 1.3rem;
		font-size: 1.3rem;
		text-align: center;
		border-bottom: 1px solid #c1c1c1;
	}
	.title span{
		padding-left: 2rem;
		padding-right: 2rem;
		
	}
	.title span:nth-child(3) img:nth-child(1){
		width: 2%;
		height: 0.4rem;
		vertical-align: top;
		margin-top: 1.5%;
	}
	.title span:nth-child(3) img:nth-child(2){
		width: 2%;
		height: 0.4rem;
		vertical-align: bottom;
		margin-left: -3.3%;
		margin-bottom: 0.8%;
	}
	.ScreeningChoice{
		font-size: 0;
		border-bottom: 1px solid #c1c1c1;
		overflow: hidden;
		background-color: white;
	}
	.ScreeningChoice span{
		display: inline-block;
		padding: 0.7rem;
		background-color: #878787;
		border-radius: 0.5rem;
		margin-left: 0.9rem;
		font-size: 1rem;
		margin-top: 0.8rem;
		margin-bottom: 0.8rem;
		color: white;
		font-weight: 100;
	}
	.ScreeningChoice span em{
		width: 0.9rem;
		height: 0.9rem;
		background: url(../../../assets/F-img/差.png)no-repeat;
		background-size: 0.9rem 0.9rem;
		display: inline-block;
		margin-left: 0.2rem;
	}
	.ScreeningChoice .empty{
		background-color: white;
		color: #3c3c3c;
		border: 1px solid #3c3c3c;
		font-weight: 400;
		padding-left: 1.2rem;
		padding-right: 1.2rem;
		float: right;
		margin-right: 1rem;
	}
	.ProductList li{
		overflow: hidden;
		border-bottom: 1px solid #c1c1c1;
		background-color: white;
		margin-bottom: 1rem;
		
	}
	.tupian{
		width: 4rem;
		height: 8rem;
		margin-left: 3rem;
		margin-top: 1.5rem;
		margin-right: 2rem;
		float: left;
		margin-bottom: 1rem;
	}
	.ProductList li h2{
		margin-top: 1.4rem;
		font-size: 1.4rem;
		font-weight: 400;
		margin-bottom: 0.3rem;
		color: #262626;
	}
	
	.ProductList li h3{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-size: 1.2rem;
		font-weight: 400;
		margin-right: 1rem;
		color: #3c3c3c;
	}
	
	.form em{
		font-size: 1.1rem;
		font-weight: 200;
	}
	.form img{
		width: 1.6rem;
		height: 1.6rem;
		position: relative;
		top: 0.4rem;
		left: 0.2rem;
		margin-right: 1rem;
	}
	.ProductList .nationalFlag{
		display: inline-block;
		width: 7%;
		height: 4%;
		background-color: #EFEFEF;
		border: 1px solid #c1c1c1;
		text-align: center;
		vertical-align: bottom;
	}
	.nationalFlag span{
		width: 0.5rem;
		height: 0.5rem;
		border-radius: 50%;
		background-color: #d72532;
		display: inline-block;
		vertical-align: top;
		margin-top: 0.35rem;
	}
	.ProductList .price{
		float: right;
		margin-right: 1.5rem;
		color: #d72533;
		margin-top: 0.5rem;
	}
	.loading{
		width: 100%;
		background-color: #efefef;
		text-align: center;
		display: inline-block;
		padding-top: 0.8rem;
		padding-bottom: 0.8rem;
		font-size: 1.1rem;
		color: #6d6d6d;
		font-weight: 300;
		
		
	}
	.version{
		width: 100%;
		vertical-align: top;
		margin-top: -1rem;
		border-top: 1px solid #c1c1c1;
	}
	
	.screening{
		width: 75vw;
		height:90vh;
		position: absolute;
		top: 10vh;
		left: 100vw;
		overflow: hidden;
	}
	.mask{
		width: 100%;
		height: 100%;
		background-color: black;
		opacity: 0.3;
		position: absolute;
		top: 0;
		display: inline-block;
		display: none;
	}
	.comprehensive{
		width: 75vw;
		background-color: white;
		z-index: 2;
		border-bottom: 1px solid #c1c1c1;
		position: absolute;
		font-size: 1.1rem;

	}
	.deliveryArea-img{
		width: 1.2rem;
		height: 1.1rem;
		margin-left: 1rem;
		margin-top: 0.8rem;
		margin-right: 0.3rem;
		vertical-align: bottom;
		margin-bottom: 0.2rem;
	}
	.origin-em{
		font-style: normal;
		font-size: 1.2rem;
		font-weight: 300;
		color: #3c3c3c;
	}
	.CommodityType-ul{
		width: 100%;
		margin-top: 0.5rem;
	}
	.Selectbutton{
		width: 28%;
		padding-top: 1rem;
		padding-bottom: 1rem;
		background-color: #EFEFEF;
		text-align: center;
		display: inline-block;
		border-radius: 0.5rem;
		margin-left: 0.74rem;
		margin-bottom: 0.8rem;
	}
	.origin-em{
		font-style: normal;
		font-size: 1.2rem;
		font-weight: 300;
		color: #3c3c3c;
	}
	.CommodityType-ul>em{
		width: 0.8rem;
		padding: 0.8rem 1.5rem 0.8rem 0.5rem;
		margin-left: 0.2rem;
		font-size: 1.1rem;
		background: url(../../../assets/F-img/左箭头.png)no-repeat;
		background-size: 0.8rem 1rem;
		background-position: 5.3rem 1rem;
		margin-left: 0.7rem;
	}
	.bottombutton{
		font-size: 0;
	}
	.reset,.determine{
		width: 37.5vw;
		line-height: 4rem;
		display: inline-block;
		font-size: 1.2rem;
		text-align: center;
	}
	.reset{
		background-color: #efefef;
	}
	.determine{
		background-color: #d72532;
		color: white;
	}
	
	
	
	
	.MoreClassification{
		width: 75vw;
		height:100vh;
		position: absolute;
		top: 0;
		left: 100vw;
		overflow: hidden;
		z-index: 10;
	}
	.MoreComprehensive{
		width: 75vw;
		height: 100%;
		background-color: white;
		z-index: 2;
		border-bottom: 1px solid #c1c1c1;
		position: absolute;
		font-size: 1.1rem;
	}
	.contentdelivery{
		width: 100%;
		height: 10%;
		text-align: center;
		background-color: #efefef;
		
	}
	.contentdelivery>img{
		width: 1rem;
		height: 1.6rem;
		float: left;
		margin-top: 10%;
	}
	.deliveryArea-more{
		display: inline-block;
		font-size: 1.7rem;
		font-weight: 200;
		color: #3c3c3c;
		margin-top: 7%;
	}
	.deliveryArea-determine{
		display: inline-block;
		float: right;
		margin-right: 1rem;
		font-size: 1.2rem;
		color: #3c3c3c;
		font-weight: 300;
		margin-top: 9%;
	}
	.list{
		margin-top: 1rem;
		margin-bottom: 0.8rem;
		padding-bottom: 0.5rem;
		margin-left: 1rem;
		border-bottom: 1px solid #c1c1c1;
	}
</style>